<template>
	<div class="layout-padding">
		<splitpanes horizontal>
			<pane size="60">
				<div class="layout-padding-auto layout-padding-view">
					<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
						<el-form-item :label="$t('wrapband.barcode')" prop="barcode" style="width: 190px">
							<el-input v-model="state.queryForm.barcode" clearable :placeholder="$t('wrapband.barcode')" />
						</el-form-item>

						<el-form-item :label="$t('wrapband.productLineCode')" prop="productLineCode" style="width: 180px">
							<el-input v-model="state.queryForm.productLineCode" clearable :placeholder="$t('wrapband.productLineCode')"/>
						</el-form-item>

						<el-form-item :label="$t('wrapband.isWrap')" prop="isWrap">
							<el-select v-model="state.queryForm.isWrap" placeholder="Select" style="width: 190px">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>

						<el-form-item :label="$t('wrapband.isBand')" prop="isBand">
							<el-select v-model="state.queryForm.isBand" placeholder="Select" style="width: 160px">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>

						<el-form-item :label="$t('wrapband.isCreateJob')" prop="isCreateJob">
							<el-select v-model="state.queryForm.isCreateJob" placeholder="Select" style="width: 160px">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" icon="search"  @click="query"> {{ $t('so.query')
								}}</el-button>
							<el-button  icon="refresh"  @click="resetQuery">{{ $t('so.reset')
								}}</el-button>

						</el-form-item>
					</el-form>
					<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
						style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
						:header-cell-style="tableStyle.headerCellStyle" @row-click="clickRow">
						<el-table-column type="index" label="#" width="80" />
						<el-table-column prop="barcode" :label="$t('wrapband.barcode')" show-overflow-tooltip />
						<el-table-column prop="isWrap" :label="$t('wrapband.isWrap')" show-overflow-tooltip >
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isWrap === 'Y' ? 'success' : 'danger'" :effect="scope.row.isWrap === 'Y' ? 'dark' : 'light'" >
									{{ scope.row.isWrap }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="isBand" :label="$t('wrapband.isBand')" show-overflow-tooltip >
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isBand === 'Y' ? 'success' : 'danger'" :effect="scope.row.isBand === 'Y' ? 'dark' : 'light'" >
									{{ scope.row.isBand }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="isCreateJob" :label="$t('wrapband.isCreateJob')" show-overflow-tooltip >
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isCreateJob === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateJob === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isCreateJob }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="productionLineCode" :label="$t('wrapband.productLineCode')"
							show-overflow-tooltip />
						<el-table-column prop="productionLineName" :label="$t('wrapband.productLineName')"
							show-overflow-tooltip />
					</el-table>

					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
						v-bind="state.pagination" />
				</div>
			</pane>
			<pane size="40">
				<detail ref="detailsRef"/>
			</pane>
		</splitpanes>

	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { queryWrapband } from '/@/api/platform/report/wrapband';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import detail from "../wrapband/detail.vue";

const { t } = useI18n();

const options = ref([
	{ label: 'All', value: '' },
	{ label: 'Yes', value: 'Y' },
	{ label: 'No', value: 'N' },
]);
// 点击行的时候触发
const clickRow = (row: any) => {
    detailsRef.value.query(row);
}
const detailsRef = ref()
// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		isWrap: '',
		isBand: '',
		isCreateJob: ''
	},
	pageList: queryWrapband,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();

	getDataList(false);
};

const query = () => {

	getDataList();
};
</script>